<template>
  <h2>用户信息查询</h2>

  <el-form @submit.native.prevent="queryUserInfo" inline>
    <div><el-form-item label="航班号">
      <el-input v-model="query.userId" placeholder="请输入用户航班号"></el-input>
    </el-form-item></div>
    <div>
    <el-form-item label="姓名">
      <el-input v-model="query.name" placeholder="请输入姓名"></el-input>
    </el-form-item></div>
    <el-form-item>
      <el-button type="primary" @click="queryUserInfo">查询</el-button>
    </el-form-item>
    <!-- 数据表格的工具栏 -->
    <div style="text-align: left">

    </div>
    <!-- 数据表格 -->
    <el-table :data="tableFlight" stripe border style="width: 100%">
      <el-table-column prop="id" label="航班号" width="200" />
      <el-table-column prop="name " label="姓名" width="150" />
      <el-table-column prop="startDate" label="始发时间" width="250" />
      <el-table-column prop="endDate" label="到达时间" width="250"/>
      <el-table-column prop="startaddress " label="始发地" width="150" />
      <el-table-column prop="endaddress " label="目的地" width="150" />
      <el-table-column prop="phonenumber " label="手机号" width="150" />


    </el-table>
  </el-form>

</template>

<script>
/*
import request from "@/utils/request";

const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}
// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  id : '' ,
  startDate : '' ,
  endDate : '' ,
  startaddress : '' ,
  endaddress : '',
  state: ''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})   // ...formAddData 解构formAddData
*/
export default {
  data() {
    return {
      form: {
        flightNumber: '',
        originalDate: ''
      },
      textarea: '',
      query: {
        userId: '',
        name: ''
      },

      userFlights: [
        // 用户航班信息数组
      ]
    };
  },
  methods: {
    queryUserInfo() {
      // 根据query条件查询用户信息
    },
    editUserInfo() {
      // 编辑用户信息的逻辑
    }
  }
};

import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])

</script>


<style scoped>
/* 页面主体样式 */
body {
  background-color: #f5f7fa; /* 浅蓝色背景 */
  font-family: 'Arial', sans-serif;
}

h1 {
  margin-top: 80px; /* 调整标题边距 */
  text-align: center;
  margin-bottom: 20px; /* 调整标题边距 */
  color: #333; /* 标题文字颜色 */
  font-size: 2.5em; /* 调整标题大小 */
}

/* 表单样式 */
.el-form {
  max-width: 1000px;
  margin: 20px auto; /* 居中显示 */
  padding: 30px;
  background: white; /* 表单背景色 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */
}

.el-form-item {
  margin-bottom: 15px; /* 调整表单项边距 */
  flex-basis: auto; /* 让表单项根据内容自动调整宽度 */
}

.el-form-item__label {
  color: #666; /* 标签文字颜色 */
}

/* 输入框样式 */
.el-input__inner {
  border-color: #dcdfe6; /* 输入框边框颜色 */
  border-radius: 4px; /* 圆角边框 */
}

.el-input__inner:focus {
  border-color: #409eff; /* 输入框聚焦时的边框颜色 */
}

/* 按钮样式 */
.el-button {
  border-radius: 20px;
  padding: 10px 20px;
  margin-right: 10px; /* 按钮之间的间距 */
}

.el-button--primary {
  background-color: #3498db; /* 主按钮背景色 */
  border-color: #3498db; /* 主按钮边框色 */
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
  border: 1px solid #dcdfe6; /* 表格边框颜色 */
}

.el-table th {
  background-color: #4680b2; /* 表头背景色 */
  color: #3498db; /* 表头文字颜色 */
}

.el-table td {
  border-bottom: 1px solid #dcdfe6; /* 单元格边框颜色 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-form {
    width: 90%;
    padding: 15px;
  }

  h1 {
    font-size: 2em;
  }

  .el-table {
    font-size: 14px;
  }
}
</style>